	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>

	<div class="col-md-1 col-md-offset-2"><img src="images/product_searchdog.jpg" class="img-responsive" alt="Responsive image">
	</div>
	<br><br>
	<div class="input-group col-md-7">
		<input type="text" value="" class="form-control txtSearch-products" placeholder="Type Product Keyword and Click to View Details" id="query" name="q" value="">
		<div class="input-group-btn">
		<button type="button" class="btn btn-primary" disabled><span class="glyphicon glyphicon-search"></span></button>
		</div>	
	</div>  
  
	

    
  
<script type="text/javascript">	
	$(document).ready(function(){
		$.ajax({
			url: 'list_products.php',
			dataType: 'json',
			success: function(result){
				console.log(result);
		
				$( ".txtSearch-products" ).autocomplete({
				source: result.data,
				select: function(event,ui){
								      		$('.txtSearch-products').val(ui.item.label);
								      		//$('#btnSearch').click();
								      		window.location.replace(ui.item.href);
								  }			
			}).autocomplete("instance")._renderItem = function(ul,item){
								    	$(ul).addClass('searchWrapUl')
						    			 return $("<li />")
								            .append("<a class='searchResult'><img src='" + "' />" + item.label + "<br>" + item.desc + "</a>")
								            .appendTo(ul);
								    };  	
			}
		});	
	});
</script>
